import { StyleSheet, Text, View, TouchableHighlight, Image } from 'react-native'
import React, { useState, createRef } from 'react'
import AntDesignIcon from 'react-native-vector-icons/AntDesign'
import Actionsheet from './Actionsheet';
import { getDomain } from '../../utils/tools'

const UploadFile = (props) => {
  const { list=[], style, onSuccess } = props
  const [tempList, setTempList] = useState([])
  const ref = createRef(null)

  const onClose = () => {
    ref.current.close()
  }
  const onOpen = () => {
    ref.current.open()
  }
  const success = (url, data) => {
    setTempList([...tempList, ...data.map(item => ({ url: item.uri }))])
    onSuccess && onSuccess(url)
  }

  return (
    <View style={[style]}>
      <View style={styles.list}>
        {
          [...(tempList.length ? tempList : list)].map(item => {
            return (
              <Image style={styles.img}
                source={{ uri: item.url.indexOf('/upload') !== -1 ? getDomain(item.url) : item.url }}
                key={item.url}></Image>
            )
          })
        }
        <TouchableHighlight underlayColor="#fff"
          style={[styles.placeholder]} onPress={onOpen}>
          <AntDesignIcon name='camerao' size={30} />
        </TouchableHighlight>
      </View>

      <Actionsheet ref={ref} onSuccess={success}></Actionsheet>
    </View>
  )
}

export default UploadFile

const w = 100
const h = 100
const styles = StyleSheet.create({
  list: {
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  placeholder: {
    width: w,
    height: h,
    backgroundColor: '#ddd',
    // borderWidth: 1,
    // borderColor: '#999',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  },
  img: {
    width: w,
    height: h,
    marginRight: 5,
    marginBottom: 5
  }
})